<template>
    <div class="counter-component">
        <div class="counter-btn"  @click.stop="minus"><i class="fa fa-minus-circle"></i></div>
        <div class="counter-show">
            <input v-model="number" @keyup="fixNumber"/>
        </div>
        <div class="counter-btn" @click.stop="add"><i class="fa fa-plus-circle"></i></div>
    </div>
</template>

<script>
export default {
  props: {
    val: {
      type: Number,
      default: 4
    },
    min:{
        type:Number,
        default:0
    },
    max:{
        type:Number,
        default:20
    }
  },
  data() {
    return {
      number: this.val
    };
  },
  methods: {
    fixNumber() {
      let fix;
      if (typeof this.number === "string") {
        fix = Number(this.number.replace(/\D/g, ""));
      } else {
        fix = this.number;
      }
      if (fix > this.max || fix < this.min) {
        fix = this.min;
      }
      this.number = fix;
    },
    minus() {
      if (this.number <= this.min) {
        return;
      }
      this.number--;
    },
    add() {
      if (this.number >= this.max) {
        return;
      }
      this.number++;
    }
  },
  watch: {
    number(newNum) {
      this.$emit("input", newNum);
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
.counter-component {
    position relative
    overflow height 
    display flex
    align-items center
    .counter-btn {
        color $color-theme
        font-size 18px
    }
    .counter-show {
        width 80px;
        input {
            width 100%
            display inline-block
            text-align center
        }
    }
}
</style>
